<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:form="http://www.w3.org/1999/html"
      layout:decorator="admin/public/layout">

<head>
    <title>用户编辑</title>
</head>
<div  layout:fragment="content">
    <section class="content-header">
        <h1>
            编辑用户
            <small>编辑用户信息</small>
        </h1>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div th:include="/admin/public/error"></div>
                <div class="box box-default">
                    <div class="box-header with-border">
                        <h3 class="box-title">基本资料</h3>
                    </div>
                    <form modelAttribute="user" th:object="${user}" role="form" name="userForm" method="POST" enctype="multipart/form-data" th:action="'/admin/user/'+${user.id}">
                        <input name="_method" type="hidden" value="PUT">
                        <div class="box-body">
                            <div th:class="${#fields.hasErrors('username')}?'form-group has-error':'form-group'">
                                <label>用户名</label>
                                <input type="text" name="username" class="form-control " placeholder="登陆用户名" th:value="${user.username}">
                                <p  th:if="${#fields.hasErrors('username')}" class="help-block" th:text="${#fields.errors('username')[0]}"></p>
                            </div>

                            <div class="form-group">
                                <label>头像</label>
                                <input type="hidden" name="avatar" th:value="${user.avatar}" />
                                <input type="file" name="avatarFile" onchange="previewImage(this,'#preview')" />
                                <div style="margin-top: 10px;">
                                    <img id="preview" th:src="${user.avatar}?${user.avatar}:'/static/images/default_avatar.jpg'" width="100"/>
                                </div>
                            </div>

                            <div th:class="${#fields.hasErrors('email')}?'form-group has-error':'form-group'">
                                <label>邮箱</label>
                                <input type="text" name="email" class="form-control " placeholder="邮箱地址" th:value="${user.email}">
                                <p  th:if="${#fields.hasErrors('email')}" class="help-block" th:text="${#fields.errors('email')[0]}"></p>
                            </div>

                            <div th:class="${#fields.hasErrors('password')}?'form-group has-error':'form-group'">
                                <label>密码</label>
                                <input type="password" name="password" class="form-control " placeholder="如果不需要修改密码请忽略"  />
                                <p  th:if="${#fields.hasErrors('password')}" class="help-block" th:text="${#fields.errors('password')[0]}"></p>
                            </div>

                            <div class="form-group">
                                <label>用户组</label>
                                <select class="form-control" name="roleIds">
                                    <option th:each="role:${roles}" th:value="${role.id}" th:text="${role.name}" th:selected="${#lists.contains(user.roles,role)}"> </option>
                                </select>
                            </div>



                            <div class="form-group ">
                                <label>性别</label>
                                <div class="radio">
                                    <label th:each="gender:${AllUserGender}"><input type="radio" name="detail.gender" th:text="${gender.name}" th:value="${gender}" th:checked="${user.detail?.gender == gender}" /></label>&nbsp;&nbsp;&nbsp;&nbsp;
                                </div>
                            </div>

                            <div th:class="${#fields.hasErrors('detail.birthday')}?'form-group has-error':'form-group'">
                                <label>出生日期</label>
                                <input type="text" name="detail.birthday" class="form-control datepicker" placeholder="出生日期" th:value="${#dates.format(user.detail?.birthday,'yyyy-MM-dd')}" />
                                <p  th:if="${#fields.hasErrors('detail.birthday')}" class="help-block" th:text="${#fields.errors('detail.birthday')[0]}"></p>
                            </div>

                            <div class="form-group">
                                <label class="control-label">所在城市</label>
                                <div class="row">
                                    <div class="col-sm-5">
                                        <select class="form-control" name="detail.province" id="province">
                                            <option value="">请选择省份</option>
                                            <option th:each="province:${AllProvince}" th:attr="provinceId=${province.id}" th:value="${province.id}" th:text="${province.name}" th:selected="${user.detail?.province == province}"> </option>
                                        </select>
                                    </div>
                                    <div class="col-sm-5">
                                        <select class="form-control" name="detail.city" id="city">
                                            <option value="">请选择城市</option>
                                            <option th:each="city:${user.detail?.province?.childs}"  th:value="${city.id}" th:text="${city.name}" th:selected="${user.detail?.city == city}" ></option>
                                        </select>
                                    </div>
                                </div>
                            </div>


                            <div th:class="${#fields.hasErrors('detail.title')}?'form-group has-error':'form-group'">
                                <label>身份职业</label>
                                <input type="text" name="detail.title" class="form-control " placeholder="身份职业" th:value="${user.detail?.title}">
                                <p  th:if="${#fields.hasErrors('detail.title')}" class="help-block" th:text="${#fields.errors('detail.title')[0]}"></p>
                            </div>


                            <div th:class="${#fields.hasErrors('detail.description')}?'form-group has-error':'form-group'">
                                <label>自我介绍</label>
                                <textarea name="detail.description" class="form-control " placeholder="自我介绍" th:text="${user.detail?.description}"></textarea>
                                <p  th:if="${#fields.hasErrors('detail.description')}" class="help-block" th:text="${#fields.errors('detail.description')[0]}"></p>
                            </div>

                            <div class="form-group">
                                <label>状态</label>
                                <span class="text-muted">(禁用后用户将不能访问网站)</span>
                                <div class="radio">
                                    <label th:each="status,iterStat:${AllUserStatus}" th:if="${iterStat.index>-1}">
                                        <input type="radio" name="status"  th:text="${status.name}" th:value="${status}"  th:checked="${user.status == status}"/>
                                    </label>&nbsp;&nbsp;
                                </div>
                            </div>

                        </div>
                        <div class="box-footer">
                            <button type="submit" class="btn btn-primary">保存</button>
                            <button type="reset" class="btn btn-success">重置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <script th:src="@{/static/js/bootstrap-datepicker/js/bootstrap-datepicker.js}"></script>
    <script th:src="@{/static/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        $(function(){
            /*生日日历*/
            $(".datepicker").datepicker({
                format: "yyyy-mm-dd",
                language: "zh-CN",
                calendarWeeks: true,
                autoclose: true
            });
            /*加载省份城市*/
            $("#province").change(function(){
                var province_id = $(this).val();
                $("#city").load("/common/loadCities/"+province_id);
            });

        });
    </script>

</div>
